<template>  
  <div>  

    <!-- <div id="results" class="results">  
      <textarea v-model="this.requestObj.sparkResult" class="result" readonly></textarea>  
    </div>   -->
    <!-- <div id="sendVal" class="send-val">  
      <input v-model="questionText" id="question" type="text"   @keyup.enter="sendMsg()"   placeholder="请输入问题...">  
      <button @click="sendMsg()" id="btn">发送信息</button>  
    </div>  -->
    
  <div class="chat-window">  
    <div class="messages">  

      <!-- 消息将在这里动态添加 -->  
      <div class="message me">  
        <p>你好！欢迎来到幸福家家政服务平台。请问有什么我可以帮您解决的问题吗？</p>  
      </div>  

    </div>  
  </div>  
  <div class="input-container">  
    <input type="text" id="messageInput" v-model="questionText"   @keyup.enter="sendMsg()" placeholder="请输入你的问题">  
    <button @click="sendMsg()" id="btn">发送</button>  
  </div>  
 
 
 </div> 
</template>  
  
<script>  
import * as CryptoJs from 'crypto-js';  
import base64 from 'base-64'; 
export default {  
  data() {  
    return { 
       messageStyle: {  
            backgroundColor: '#dcf8c6',  
            float: 'left',
            clear: 'both'  
      }, 
      questionText: '',  
      resultText: '',  
      requestObj: {  
        APPID: 'a60179d3',  
        APISecret: 'YjY3NWIwMGRiNTY5ZmZlNWUyNTAzNThj',  
        APIKey: '3477330749ea81e815024a5ff5ee0641',  
        Uid: 'redrun',  
        sparkResult: '在线助手：'  
      },  
      // 假设你有一个方法来获取WebSocket的URL  
      websocketUrl: ''  
    };  
  },  
  methods: {  
    async getWebsocketUrl() { 
       let url = "wss://spark-api.xf-yun.com/v1.1/chat";
         let host = "spark-api.xf-yun.com";
        let apiKeyName = "api_key";
        let date = new Date().toGMTString();
        let algorithm = "hmac-sha256"
        let headers = "host date request-line";
        let signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v1.1/chat HTTP/1.1`;
        let signatureSha = CryptoJs.HmacSHA256(signatureOrigin, this.requestObj.APISecret);
        let signature = CryptoJs.enc.Base64.stringify(signatureSha);

        let authorizationOrigin = `${apiKeyName}="${this.requestObj.APIKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;

        let authorization = base64.encode(authorizationOrigin);

        // 将空格编码
        url = `${url}?authorization=${authorization}&date=${encodeURI(date)}&host=${host}`;
   
        // 正确解析Promise  
        return url
    },  
    async sendMsg() {  
      try {  
       this.websocketUrl = await this.getWebsocketUrl();  
        const socket = new WebSocket(this.websocketUrl );  
          const inputVal = this.questionText;  
        socket.onopen = (event) => {  
          console.log('开启连接！！', event);  
          // 这里是发送消息到WebSocket服务器的逻辑  
          // 注意：WebSocket的API是onopen而不是addEventListener('open', ...) 
            let params = {
            "header": {
                "app_id": this.requestObj.APPID,
                "uid": "redrun"
            },
            "parameter": {
                "chat": {
                    "domain": "general",
                    "temperature": 0.5,
                    "max_tokens": 1024,
                     
                },           
            },
            // "system":{
            // "background":"你是幸福家家政服务平台的在线助手，帮助用户解决关于平台的问题"                
            // },
            "payload": {
                "message": {
                    // 如果想获取结合上下文的回答，需要开发者每次将历史问答信息一起传给服务端，如下示例
                    // 注意：text里面的所有content内容加一起的tokens需要控制在8192以内，开发者如有较长对话需求，需要适当裁剪历史信息
                    "text": [
                        { "role": "system", "content": "你现在是幸福家家政服务平台的在线助手，接下来请用平台助手的口吻和用户对话，帮助用户解决关于平台的问题" }, //# 用户的历史问题
                          { "role": "user", "content": "你是谁" }, 
                         { "role": "assistant", "content": "我是幸福家家政服务平台的在线助手" }, //# 用户的历史问题
                          { "role": "user", "content": "你能做什么" }, 
                         { "role": "assistant", "content": "我专门为用户提供关于家政服务的各种帮助和解答。如果您有任何关于家政服务的问题或需要协助，请随时告诉我，我会尽力为您提供支持和解决方案。" }, //# 用户的历史问题
//           { "role": "user", "content": "你们提供哪些家政服务" }, 
// { "role": "assistant", "content": "我们提供各种类型的家政服务，包括但不限于清洁服务、烹饪服务、看护服务、保姆服务和家庭维修服务。具体服务内容可以根据您的需求进行定制，以满足您的家庭需求。" }, //# 用户的历史问题
// { "role": "user", "content": "你们的服务质量如何保证" }, 
// { "role": "assistant", "content": "我们的家政服务人员都经过严格的筛选和专业的培训，以确保他们具备必要的技能和经验。此外，我们还会定期对服务人员进行评估和监督，以保证服务的质量和标准。如果您对我们的服务有任何不满，我们都会尽力解决，确保您满意。" }, //# 用户的历史问题
// { "role": "user", "content": "我需要一位会做川菜的家政员，你们能找到吗" }, 
// { "role": "assistant", "content": "当然可以，我们会根据您的需求找到擅长做川菜的家政员。请告诉我们您的具体需求和期望的服务时间，我们会尽快为您安排合适的人选。" }, //# 用户的历史问题
// { "role": "user", "content": "家政员的费用是怎么计算的" }, 
// { "role": "assistant", "content": "我们的家政服务费用通常是根据服务的类型、时间和复杂性来计算的。具体的费用会在了解您的需求后给出详细的报价。我们承诺提供透明公正的定价，不会有任何隐藏费用。" }, //# 用户的历史问题
                       // ....... 省略的历史对话
                        { "role": "user", "content": inputVal },  //# 最新的一条问题，如无需上下文，可只传最新一条问题
                    ]
                }
            }
        }; 
         socket.send(JSON.stringify(params));
         this.createmeDiv();
         this.questionText = '';
        // 
        //   // 假设你有一个方法来格式化消息并发送  
        //   this.sendMessageToServer(socket, inputVal);  
        };  
  
        socket.onmessage = (event) => { 
             console.log('接收信息！！', event.data); 
            let data = JSON.parse(event.data);
        // console.log('收到消息！！',data);
        console.log("content收到",data.payload.choices.text[0].content);
        this.requestObj.sparkResult += data.payload.choices.text[0].content;
        if (data.header.code !== 0) {
            console.log("出错了", data.header.code, ":", data.header.message);
            // 出错了"手动关闭连接"
            socket.close()
        }
        if (data.header.code === 0) {
             console.log('对话完成！！', event);
            
            // 对话已经完成
            if (data.payload.choices.text && data.header.status === 2) {
              if( !this.requestObj.sparkResult.endsWith(data.payload.choices.text[0].content)){
                 console.log("content完成",data.payload.choices.text[0].content)
                this.requestObj.sparkResult += data.payload.choices.text[0].content;
                setTimeout(() => {
                    // "对话完成，手动关闭连接"
                    socket.close()
                }, 1000)
              }
              
            }
        }
        // addMsgToTextarea(requestObj.sparkResult); 
          // 接收服务器响应并处理  
       
        };  
  
        socket.onerror = (error) => {  
          console.error('错误信息 ', error);  
        };  
  
        socket.onclose = (event) => {  
             console.log('关闭连接！！', event); 
              this.createyouDiv()
                    // 对话完成后socket会关闭，将聊天记录换行处理
                    
        this.requestObj.sparkResult = this.requestObj.sparkResult +'\n';
        // +"\n";
        // // 清空输入框
        // this.questionText = ''
            // console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);  

        };  
        this.requestObj.sparkResult=""
      } catch (error) {  
        console.error('Error connecting to WebSocket:', error);  
      }  
    },  
    createmeDiv(){
  
  // 获取输入框的值  
    var messageText =this.questionText;  
      //   const newDiv = {  
      //   class:'message me',
      //   // content: messageText,  
      //   style: {  
      //     // color: 'blue',  
      //     // fontSize: '16px',  
      //     backgroundColor: '#dcf8c6',
      //       // background-color: #dcf8c6;  
      //     float: 'left', 
      //     clear: 'both'  
      //   }  
      // };  
  // 检查是否有内容输入  
  if (messageText.trim() !== '') {  
    // 创建一个新的消息div元素  
    var messageDiv = document.createElement('div');  
    messageDiv.classList.add("message","me")
    // 创建一个包含消息的p元素  
    var messageP = document.createElement('p');
    messageP.textContent = messageText; // 设置文本内容
        messageP.setAttribute('readonly', 'readonly'); // 虽然p元素默认就是只读的，但这里明确设置一下    
          messageDiv.setAttribute('style', 
          '   margin-bottom: 10px;  padding: 5px 10px; border-radius: 5px; max-width: 80%;word-wrap: break-word; background-color: #add8e6;float: right;clear: both; ');  

    // 将p元素添加到div元素中  
    messageDiv.appendChild(messageP);  
    // 将新的消息div元素添加到消息容器中  
    var messagesContainer = document.querySelector('.messages');  
    messagesContainer.appendChild(messageDiv);  
  
    // 滚动到最新消息（可选）  
    messagesContainer.scrollTop = messagesContainer.scrollHeight;  
  }  
    },
    createyouDiv(){

  // 获取输入框的值  
    var messageText = this.requestObj.sparkResult;
    if (messageText.trim() !== '') {   
    console.log("message",messageText) 
    var messageDiv = document.createElement('div');  
    messageDiv.classList.add('message','you');  
    // 这里我们假设总是添加 'me' 类，你可能需要根据实际情况进行判断  
    // messageDiv.classList.add();  
    // 创建一个包含消息的p元素  
    var messageP = document.createElement('p');  
    messageP.textContent = messageText; // 设置文本内容  
    messageP.setAttribute('readonly', 'readonly'); // 虽然p元素默认就是只读的，但这里明确设置一下  
    messageDiv.setAttribute('style', 
    '   margin-bottom: 10px;   padding: 5px 10px; border-radius: 5px; max-width: 80%; word-wrap: break-word;   background-color: #dcf8c6;float: left; clear: both;   ');  

    // 将p元素添加到div元素中  
    messageDiv.appendChild(messageP);  
  // appendChild()
    // 将新的消息div元素添加到消息容器中  
    var messagesContainer = document.querySelector('.messages');  
    messagesContainer.appendChild(messageDiv);  
  
    // 滚动到最新消息（可选）  
    messagesContainer.scrollTop = messagesContainer.scrollHeight;  
    }}
},

};  
</script>  

  
<style scoped> 
.chat-container {  
  width: 300px;  
  height: 500px;  
  border: 1px solid #ccc;  
  overflow-y: auto;  
  padding: 10px;  
  font-family: Arial, sans-serif;  
}  

.chat-window {  
  height: 400px;  
  border-bottom: 1px solid #ccc;  
  padding-bottom: 10px;  
  overflow-y: auto;  
}  
  
.messages {  
  padding: 10px;  
}  
  
.message {  
  margin-bottom: 10px;  
  padding: 5px 10px;  
  border-radius: 5px;  
  max-width: 80%;  
  word-wrap: break-word;  
}  
  
.message.me {  
  background-color: #dcf8c6;  
  float: left;  
  clear: both;  
}  
  
.message.you {  
  background-color: #add8e6;  
  float: right;  
  clear: both;  
}  
  
.input-container {  
  margin-top: 10px;  
}  
  
#messageInput {  
  width: 370px;  
  padding: 5px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}  
  
button {  
width: 80px;
  margin-left: 5px;   
  padding: 5px 10px;  
  border: none;  
  border-radius: 5px;  
  background-color: #4CAF50;  
  color: white;  
  cursor: pointer;  
}  
  
button:hover {  
  background-color: #45a049;  
} 
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
h1 {  
  text-align: center;  
  color: #5165EA;  
}  

.results {  
  width: 100%;  
  height: 80%;  
  background-color: #E2EEFF;  
}  
.result {  
  width: 100%;  
  height: 100%;  
  padding: 10%;  
  background-color: #E2EEFF;  
  white-space: pre-line;  
  resize: none; /* 防止用户调整textarea大小 */  
}  
.send-val {  
  display: flex;  
  width: 100%;  
  height: 20%;  
}  
.send-val #question {  
  width: 70%;  
  height: 100%;  
  padding: 5%;  
  border: 2px dotted blue;  
}  
.send-val #btn {  
  width: 40%;  
  height: 100%;  
  background-color: #5D7CFF;  
  color: white; /* 添加按钮文字颜色 */  
  border: none; /* 移除按钮边框 */  
  cursor: pointer; /* 添加鼠标悬停效果 */  
}  
</style>